<template>
    <div class="wifiset">
        <van-popup v-model="show" round closeable position="bottom" :style="{ height: '90%' }">
            <div class="inner">
                <van-collapse v-model="activeNames">
                    <van-collapse-item :title="$t('wifiset1')" name="1">
                        <p>{{$t('wifiset2')}}</p>
                        <p>{{$t('wifiset3')}}</p>
                        <div class="pic1" @click="openPic(0)"><img src="../../assets/wifiset/wifiset1.png" alt=""></div>
                        <p>{{$t('wifiset4')}}</p>
                        <p>{{$t('wifiset5')}}</p>
                        <p>{{$t('wifiset6')}}</p>
                        <div class="pic1" @click="openPic(1)"><img src="../../assets/wifiset/wifiset2.png" alt=""></div>
                        <p>{{$t('wifiset7')}}</p>
                        <p class="bolder">{{$t('wifiset8')}}</p>
                        <div class="pic1" @click="openPic(2)"><img src="../../assets/wifiset/wifiset3.png" alt=""></div>
                        <p>{{$t('wifiset9')}}</p>
                    </van-collapse-item>
                    <van-collapse-item :title="$t('wifiset10')" name="2">
                        <p v-for="item in 12" :key="item">{{$t(`wifiset${item+10}`)}}</p>
                        <div class="pic1" @click="openPic(3)"><img src="../../assets/wifiset/wifiset4.png" alt=""></div>
                    </van-collapse-item>
                    <van-collapse-item :title="$t('wifiset23')" name="3">
                        <p v-for="item in 8" :key="item">{{$t(`wifiset${item+23}`)}}</p>
                        <p class="red">{{$t('wifiset32')}}</p>
                        <div class="pic1" @click="openPic(4)"><img src="../../assets/wifiset/wifiset5.png" alt=""></div>
                        <p class="bolder">{{$t('wifiset33')}}</p>
                        <p>{{$t('wifiset34')}}</p>
                        <div class="pic1" @click="openPic(5)"><img src="../../assets/wifiset/wifiset6.png" alt=""></div>
                    </van-collapse-item>
                    <van-collapse-item :title="$t('wifiset35')" name="4">
                        <div class="pic1" @click="openPic(6)"><img src="../../assets/wifiset/wifiset7.png" alt=""></div>
                        <p>{{$t('wifiset36')}}</p>
                        <p>{{$t('wifiset37')}}</p>
                        <p>{{$t('wifiset38')}}</p>
                        <div class="pic1" @click="openPic(7)"><img src="../../assets/wifiset/wifiset8.png" alt=""></div>
                        <p>{{$t('wifiset39')}}</p>
                        <p>{{$t('wifiset40')}}</p>
                        <div class="pic1" @click="openPic(8)"><img src="../../assets/wifiset/wifiset9.png" alt=""></div>
                        <p>{{$t('wifiset41')}}</p>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            show: false,
            openNum:'1',
            activeNames:[],
            imgArr:[
                require('../../assets/wifiset/wifiset1.png'),
                require('../../assets/wifiset/wifiset2.png'),
                require('../../assets/wifiset/wifiset3.png'),
                require('../../assets/wifiset/wifiset4.png'),
                require('../../assets/wifiset/wifiset5.png'),
                require('../../assets/wifiset/wifiset6.png'),
                require('../../assets/wifiset/wifiset7.png'),
                require('../../assets/wifiset/wifiset8.png'),
                require('../../assets/wifiset/wifiset9.png')
            ]
        };
    },
    methods: {
        openPop(val,num){
            this.show=val;
            this.openNum=num;
            this.activeNames=[this.openNum];
        },
        openPic(num){
            ImagePreview([this.imgArr[num]]);
        }
    },
    mounted(){
        this.activeNames=[this.openNum];
    }
};
</script>
<style  lang="less">
.wifiset{
    .inner{
        margin-top: 40px;
        text-align: left;
        p{
            text-indent: 1em;
        }
        .pic1{
            margin: 0 auto;
            width: 90%;
            img{
                width: 100%;
            }
        }
        .bolder{
            font-weight: bolder;
            color:#333;
        }
        .red{
            font-weight: bolder;
            color:red;
        }
    }
    .van-popup__close-icon--top-right{
        position: fixed;
        top:12%
    }
}
</style>
